<template>
	<view>
		<view class="box">
			<canvas canvas-id="qrCanvas" style="width:0;height:0;"></canvas>
			<!-- <image src="../../static/images/erweima/相机_o.svg" mode="widthFix"/> -->
			<image :src="images" mode="widthFix" @click="previewImage(images)"></image>
		</view>
		<!-- <view  class="iamsgse" 
		  <image src="{{imagessadd}}" mode="widthFix"/>
		</view> -->
		<view class="erweia" @click="replacea">
			更换二维码
		</view>
	</view>
	
	

</template>

<script>
	import api from '../../api/Channel.js'
	import request from '../../api/index.js'
	import suffixAddress from '../../api/suffixAddress.js'
	import commonMixin from '@/mixins/qiLiuyun.js';
	import jsQR from 'jsqr';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				images: ''
			}
		},
		onLoad() {
			this.qrcode()
		},
		methods: {
			async qrcode() {
				let res = await request({
					url: api.Channel + suffixAddress.add().qrcode
				});
				this.images = res.data.url
			},
			previewImage(images) {
				uni.previewImage({
					current: images, // 当前预览的图片
					urls: [images] // 所有图片数组，可左右滑动
				});
			},
			async replacea(){
				let th = this
				uni.chooseImage({
				  count: 1, // 选择图片数量
				  sizeType: ['original', 'compressed'], // 可选择原图或压缩图
				  sourceType: ['album'], // 仅从相册选择
				  success: (res) => {
				    const imagePath = res.tempFilePaths[0]; // 获取选择的图片路径
					th.qrcodeup(imagePath)
				  },
				  fail: (err) => {
				    console.error('选择图片失败：', err);
				  }
				});

			},
			
			

			async qrcodeup(imagePath){
				const key = await this.Tokenqiniu(imagePath,'user-share-qrcode');
				let obj = {
					url: api.Channel + suffixAddress.add().qrcode ,
					method: "PUT",
					header: {
					    'Content-Type': 'application/json'
					  },
					  data: {
					    code: key // 替换为实际的 code 值
					  },
				}
				let res = await request(obj)
				this.qrcode()
			}
		}
	}
</script>

<style>
	page{
		background: #f9f9f9;
		min-height: 100vh;
	}
	.box {
		width: 100vw;
		height: 80vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.erweia {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		margin: 40rpx;
		border-radius: 20rpx;
		background: #ff884d;
	}

	.iamsgse {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>